<template>
  <div class="ground-content">
    <ShakeSlot>
      <div class="ground-title">图标广场</div>
    </ShakeSlot>
    <div class="mx-10 mt-10">
      <el-switch v-model="switchVal" active-text="多项目" inactive-text="单项目"></el-switch>
    </div>
    
    <entire v-if="switchVal" />
    <single v-else />
    <!-- <single /> -->
    <entire />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ShakeSlot from 'components/ShakeSlot.vue';
import entire from './entire.vue';
import single from './single.vue';

const switchVal = ref(false);
</script>

<style lang="less" scoped>
.ground-content {
  position: relative;
  // display: flex;
  // flex-direction: column;
  height: 100%;
  color: #000;
  background-color: rgba(200, 196, 196, 0.5);
  opacity: 0.8;

  .ground-title {
    width: 100%;
    display: flex;
    font-size: 20px;
    justify-content: center;
    height: 40px;
    align-items: center;
    background: #fff;
    padding: 10px 0;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  }
}
:deep(.el-switch__label.is-active){
  span{
    color: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    ;
  }
}
:deep(.el-switch__label:not(.is-active)){
  span{
    color: #000;
  }
}
</style>
